<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery实现动画</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <button class="start">开始</button>
    <button class="end">结束</button>
    <div class="box"></div>
    <div id="clickme">
        Click here
    </div>
    <img id="book" src="../0626/imgs/0.png" alt="" width="100" height="123" style="position: relative; left: 10px;">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
        integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
        crossorigin="anonymous" referrerpolicy="no-referrer">
    </script>
    <script>
        //hide show slideUp slideDown fadeIn fadeOut
        //animation({属性：值}，时间毫秒 ，"动画方式"，回调函数)
        //stop(是否清空动画队列,是否跳转到当前动画结束) finish()
        $(".start").click(() => {
            $(".box")
                .hide(1000)
                .show(1000)
                // .slideUp(1000)
                // .slideDown(1000)
                // .fadeOut(1000)
                // .fadeIn(1000)
                .animate({ width: 500 ,
                    height:200,
                    opacity:0.55
                }, 1000, "linear", () => { console.log(1) })
        })
        $(".end").click(() => {
            // $(".box").stop(false,true)
            $(".box").finish()
        })
        
        // $("#clickme").on("click", function () {
        //     $("#book").animate({
        //         opacity: 0.25,
        //         left: "+=50",
        //         height: "toggle"
        //     }, 5000, function () {
        //         // Animation complete.
        //     });
        // });
        $("#clickme").on("click", function () {
            $("#book").animate({
                opacity: 0.25,
                right: "+=50",
                bottom: "+=50",
                height: "toggle"
            }, 5000, function () {
                // Animation complete.
            });
        });
    </script>
</body>

</html>